.adv-page {
  padding: 20px;
  max-width: 100%; // 确保页面整体宽度不会超出屏幕宽度
  margin: 0 auto; // 居中显示
  box-sizing: border-box; // 包括内边距在内计算总宽度
  display: flex;
  flex-direction: column;
  align-items: center; // 居中内容

  @media (max-width: 768px) {
    max-width: 450px; // 限制手机端宽度
    padding: 10px; // 手机端减少页面内边距
  }
}

.adv-title {
  font-size: 2em;
  text-align: center;
  margin-bottom: 20px;
  max-width: 100%; // 确保标题不会超出宽度

  @media (max-width: 768px) {
    font-size: 1.5em; // 手机端缩小标题字体
  }
}

.adv-text {
  text-align: center;
  font-size: 1.2em;
  margin-bottom: 30px;
  max-width: 100%; // 确保文字不超出父容器

  @media (max-width: 768px) {
    font-size: 1em; // 手机端缩小正文字体
  }
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); // 默认两列布局
  gap: 15px;
  width: 100%; // 确保网格宽度不超出父容器

  @media (max-width: 768px) {
    grid-template-columns: repeat(1, 1fr); // 手机端调整为单列布局
  }
}

.image-item {
  cursor: pointer;

  img {
    width: 100%; // 图片宽度占满父容器
    height: auto; // 保持图片比例
    max-width: 100%; // 确保不会超出屏幕宽度
    border-radius: 8px;
    transition: transform 0.3s;

    &:hover {
      transform: scale(1.05); // 可选的悬浮效果
    }
  }
}

// 确保页面在手机端适配
@media (max-width: 768px) {
  .adv-page {
    padding: 10px; // 调整页面内边距
  }

  .adv-title {
    font-size: 1.5em; // 标题字体大小
  }
}
